<!-- #layout name=default -->
<style type="text/css">
  .thumbnail {
    width: 100%;
    height: 148px;
    overflow: hidden;
    padding: 0;
  }
</style>
<div id="main" class="with-button" v-cloak>
  <div class="page-header">
    <h1 class="title">Edit image</h1>
  </div>
  <div class="form-horizontal">
    <div class="form-group">
      <label class="control-label col-md-2">File name</label>
      <div class="col-md-10">
        <p class="form-control-static">{{ filename }}</p>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-md-2">URL</label>
      <div class="col-md-10">
        <p class="form-control-static">
          <a target="_blank" :href="link">{{ linkText }}</a>
        </p>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-md-2">Alt text</label>
      <div class="col-md-10">
        <input
          type="text"
          v-model="altText"
          class="form-control input-xlarge"
        />
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-md-2">Image</label>
      <div class="col-md-10">
        <div class="row">
          <div class="col-md-8">
            <div class="row">
              <div class="col-md-12">
                <img
                  alt=""
                  :src="src"
                  class="img-responsive"
                  id="editable-img"
                />
              </div>
            </div>
            <button
              v-show="!imageEditing"
              @click="toggleMode"
              class="btn green margin-top-10"
              >Edit</button
            >
          </div>
          <div v-show="imageEditing" class="col-md-4">
            <div class="col-md-12">
              <div class="thumbnail margin-bottom-10"></div>
              <div class="margin-bottom-10">
                <button @click="saveEditing" class="btn green">Crop</button>
                <button @click="toggleMode" class="btn btn-default"
                  >Exit</button
                >
              </div>
              <div class="btn-group btn-group-justified margin-bottom-10">
                <a
                  href="javascript:;"
                  @click="actionClick({ name: 'zoom', value: 0.1 })"
                  v-kb-tooltip="Kooboo.text.tooltip.image.zoomIn"
                  class="btn btn-default"
                  ><i class="fa fa-search-plus"></i
                ></a>
                <a
                  href="javascript:;"
                  @click="actionClick({ name: 'zoom', value: -0.1 })"
                  v-kb-tooltip="Kooboo.text.tooltip.image.zoomOut"
                  class="btn btn-default"
                  ><i class="fa fa-search-minus"></i
                ></a>
                <a
                  href="javascript:;"
                  @click="actionClick({ name: 'move', value: [-10, 0] })"
                  v-kb-tooltip="Kooboo.text.tooltip.image.moveLeft"
                  class="btn btn-default"
                  ><i class="fa fa-arrow-left"></i
                ></a>
                <a
                  href="javascript:;"
                  @click="actionClick({ name: 'move', value: [10, 0] })"
                  v-kb-tooltip="Kooboo.text.tooltip.image.moveRight"
                  class="btn btn-default"
                  ><i class="fa fa-arrow-right"></i
                ></a>
                <a
                  href="javascript:;"
                  @click="actionClick({ name: 'move', value: [0, -10] })"
                  v-kb-tooltip="Kooboo.text.tooltip.moveUp"
                  class="btn btn-default"
                  ><i class="fa fa-arrow-up"></i
                ></a>
                <a
                  href="javascript:;"
                  @click="actionClick({ name: 'move', value: [0, 10] })"
                  v-kb-tooltip="Kooboo.text.tooltip.moveDown"
                  class="btn btn-default"
                  ><i class="fa fa-arrow-down"></i
                ></a>
                <a
                  href="javascript:;"
                  @click="actionClick({ name: 'rotate', value: -90 })"
                  v-kb-tooltip="Kooboo.text.tooltip.image.rotateLeft"
                  class="btn btn-default"
                  ><i class="fa fa-rotate-left"></i
                ></a>
                <a
                  href="javascript:;"
                  @click="actionClick({ name: 'rotate', value: 90 })"
                  v-kb-tooltip="Kooboo.text.tooltip.image.rotateRight"
                  class="btn btn-default"
                  ><i class="fa fa-rotate-right"></i
                ></a>
                <a
                  href="javascript:;"
                  @click="actionClick({ name: 'scaleX' })"
                  v-kb-tooltip="Kooboo.text.tooltip.image.horizontalFlip"
                  class="btn btn-default"
                  ><i class="fa fa-arrows-h"></i
                ></a>
                <a
                  href="javascript:;"
                  @click="actionClick({ name: 'scaleY' })"
                  v-kb-tooltip="Kooboo.text.tooltip.image.verticalFlip"
                  class="btn btn-default"
                  ><i class="fa fa-arrows-v"></i
                ></a>
              </div>
              <div class="form-group">
                <label class="control-label col-md-3">Ratio</label>
                <div class="col-md-9">
                  <div class="btn-group" data-toggle="buttons">
                    <label
                      v-for="$data in aspectRatioArray"
                      class="btn btn-default"
                      @click.prevent="changeRatio($data)"
                      :class="{ active: aspectRatio == $data.ratio }"
                    >
                      <input
                        type="radio"
                        class="toggle"
                        name="aspectRatio"
                        v-model="aspectRatio"
                        :value="$data.ratio"
                      />
                      {{ $data.text }}
                    </label>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label class="control-label col-md-3">Width</label>
                <div class="col-md-9">
                  <div class="input-group bootstrap-touchspin">
                    <span class="input-group-btn">
                      <button
                        class="btn btn-default bootstrap-touchspin-down"
                        type="button"
                        @click="attrAction({ name: 'width', op: '-' })"
                        >-</button
                      >
                    </span>
                    <span
                      class="input-group-addon bootstrap-touchspin-prefix"
                      style="display: none;"
                    ></span>
                    <input
                      type="text"
                      v-model="width"
                      id="dataWidth"
                      class="form-control text-right"
                    />
                    <span class="input-group-addon bootstrap-touchspin-postfix"
                      >px</span
                    >
                    <span class="input-group-btn">
                      <button
                        class="btn btn-default bootstrap-touchspin-up"
                        type="button"
                        @click="attrAction({ name: 'width', op: '+' })"
                        >+</button
                      >
                    </span>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label class="control-label col-md-3">Height</label>
                <div class="col-md-9">
                  <div class="input-group bootstrap-touchspin">
                    <span class="input-group-btn">
                      <button
                        class="btn btn-default bootstrap-touchspin-down"
                        type="button"
                        @click="attrAction({ name: 'height', op: '-' })"
                        >-</button
                      >
                    </span>
                    <span
                      class="input-group-addon bootstrap-touchspin-prefix"
                      style="display: none;"
                    ></span>
                    <input
                      type="text"
                      v-model="height"
                      id="dataWidth"
                      class="form-control text-right"
                    />
                    <span class="input-group-addon bootstrap-touchspin-postfix"
                      >px</span
                    >
                    <span class="input-group-btn">
                      <button
                        class="btn btn-default bootstrap-touchspin-up"
                        type="button"
                        @click="attrAction({ name: 'height', op: '+' })"
                        >+</button
                      >
                    </span>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label class="control-label col-md-3">Rotate</label>
                <div class="col-md-9">
                  <div class="input-group bootstrap-touchspin">
                    <span class="input-group-btn">
                      <button
                        class="btn btn-default bootstrap-touchspin-down"
                        type="button"
                        @click="attrAction({ name: 'rotate', op: '-' })"
                        >-</button
                      >
                    </span>
                    <span
                      class="input-group-addon bootstrap-touchspin-prefix"
                      style="display: none;"
                    ></span>
                    <input
                      type="text"
                      v-model="rotate"
                      id="dataWidth"
                      class="form-control text-right"
                    />
                    <span class="input-group-addon bootstrap-touchspin-postfix"
                      >degree</span
                    >
                    <span class="input-group-btn">
                      <button
                        class="btn btn-default bootstrap-touchspin-up"
                        type="button"
                        @click="attrAction({ name: 'rotate', op: '+' })"
                        >+</button
                      >
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="page-buttons">
    <a
      href="javascript:;"
      class="btn green"
      @click="submitEdit"
      :class ="{ disabled: imageEditing }"
      :disabled = "imageEditing"
      >Save</a
    >
    <a href="javascript:;" @click="userCancel" class="btn gray"
      >Cancel</a
    >
  </div>
</div>

<script>
  (function() {
    Kooboo.loadJS(["/_Admin/Scripts/lib/cropper/cropper.min.js"]);

    Kooboo.loadCSS(["/_Admin/Scripts/lib/cropper/cropper.min.css"]);
  })();
</script>
<script src="/_Admin/View/Contents/EditImage.js"></script>
